<template>
  <div :style="{ color }">
    <banner1 v-if="type === '1'"></banner1>
    <banner2 v-if="type === '2'"></banner2>
    <banner3 v-if="type === '3'"></banner3>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import { Banner1, Banner2, Banner3 } from './components'

interface Props {
  type?: '1' | '2' | '3'
  color?: string
}

withDefaults(defineProps<Props>(), {
  type: '1',
  color: '#409eff',
})
// defineProps({
//   type: {
//     type: String as PropType<'1' | '2' | '3'>,
//     default: '1',
//   },
//   color: {
//     type: String,
//     required: true,
//   },
// })
</script>

<style scoped></style>
